iT邦幫忙

2024 iThome 鐵人賽

DAY 28
0
自我挑戰組

PHP框架-Laravel自學挑戰系列 第 28

DAY 28 - resume builder: 將resume更新至GitHub README (下)發送PUT request

  • 分享至 

  • xImage
  •  

哈囉大家好~
今天除了發新的文之外,也會補上昨天的內容(有興趣的邦友可以看看昨天的文XD)
在user資料表新增完OAuth Token欄位以及調整accessible repo的權限後就可以來寫發送請求的程式碼了!
那就開始吧~

首先來處理最簡單的介面,在編輯按鈕"Edit"旁邊新增"Update to GitHub README"按鈕:
https://ithelp.ithome.com.tw/upload/images/20240928/2016898630YwDM7zw9.png
將按鈕新增在ResumePreview Component中:

<button type="button"
                class="btn btn-dark"
                wire:click="uploadToREADME"
>Update to GitHub README</button>

按下按鈕後就會將resume的內容更新到personal README file(這裡的README格式是寫好的格式,只有內容會根據resume中撰寫的內容做更新),更新完成畫面如下:
https://ithelp.ithome.com.tw/upload/images/20240928/20168986ZeWyWCxvTQ.png

(謝天謝地還好最後有做出來XD測試成功時心裡很有成就感 哈哈/images/emoticon/emoticon07.gif

接下來說明比較複雜一點的發送put request的程式碼!
在開始撰寫程式碼前,先把功能拆成兩個部分:

  1. 將resume的內容轉換成md格式
  2. 發送put request將內容更新至GitHub Personal README

首先將resume的內容轉換成md格式寫成另一個function resumeContent():

public function resumeContent()
    {
        $resumeContent = Resume::find($this->resumeId);

        $markdownContent = <<<EOD
        # {$resumeContent->name}

        ### About me 😆 
        {$resumeContent->selfIntro}
        ### I graduated from...📖
        {$resumeContent->education}
        ### I'm good at several things below... 💪
        {$resumeContent->skills}
        ### I love connecting with people using their mother languages...🗣️
        {$resumeContent->language}
        ### Learn more about me? Sure 😎
        {$resumeContent->social}
        ### Let's keep in touch 🤙
        Phone: {$resumeContent->phone}
        
        Email: {$resumeContent->email}
        EOD;

        return $markdownContent;
    }

這個function會直接回傳我的README 模版和resume的內容~
這裡markdown的內容用PHP中其中一個表達字串的方式-Heredoc結構來撰寫。

這裡指定按下按鈕後會呼叫發送put request的function:uploadToREADME,將此function寫在ResumePreview Controller中:

public function uploadToREADME()
    {
        // 1.
        $githubUser = Auth::user();
        $github_token = $githubUser->oauth_token; // oauth token
        $repo_owner = $githubUser->nickname; 
        $repo_name = $githubUser->nickname; 

        // 2.
        $content = $this->resumeContent(); // resume內容
        $contentBase64 = base64_encode($content);

        // 3.
        $fileResponse = Http::withHeaders([
            'Authorization' => 'Bearer ' . $github_token,
        ])->get("https://api.github.com/repos/$repo_owner/$repo_name/contents/README.md");

        // 接收回傳資料失敗,回傳error畫面
        if ($fileResponse->failed()) {
            return view('livewire.error');
        }
        
        // 4.
        $fileData = $fileResponse->json();
        $sha = $fileData['sha'];

        $body = [
            "message" => "Updated README file",
            "content" => $contentBase64,
            "sha" => $sha,
        ];

        // 5.
        $response = Http::withHeaders([
            'Authorization' => 'Bearer ' . $github_token,
            'Content-Type' => 'application/json',    
        ])->put("https://api.github.com/repos/$repo_owner/$repo_name/contents/README.md", $body);

        // 接收回傳資料失敗,回傳error畫面
        if ($response->failed()) {
            return view('livewire.error');
        }
        // 6.
        return redirect()->to('/dashboard');
    }

上方程式碼執行了以下的任務:(程式碼有註解號碼對應喔!)

  1. 取得使用者的OAuth Token以及GitHub帳號名稱
  2. 將resume內容寫成markdown格式並且轉換成base64編碼(這裡根據API文檔進行設定)
  3. 更新檔案時,必須要提供目前檔案的sha,所以發送put request更新檔案前要先發送get request來取得目前檔案的sha。
  4. 把接收到的sha塞進要傳送的body中,並且加上"message"(commit的內容)以及"content"(要更新的resume內容)
  5. 發送put request!要記得在Header裡面加上OAuth Token以及資料型態'application/json'(發送API時需要的內容皆參考文檔)
  6. 順利更新檔案後,切換畫面回到dashboard,可以到個人GitHub主頁確認更新內容~

註:這裡要來科普一下GitHub API中的"sha"!
sha(Secure Hash Algorithm),是一種獨一無二的識別器(identifier),用來判斷repo中檔案的特定版本。在GitHub API中,要更新檔案時,就會需要附上目前檔案的sha,目的是要確保更新的檔案是正確的版本並且防止因為檔案的更改而導致衝突(confilct)。


昨天因為bug爆炸還以為功能要做不出來了XD沒想到重新閱讀文檔,搭配Chat GPT幫忙debug後總算成功實現這個功能!!!/images/emoticon/emoticon42.gif
不知不覺鐵人賽就快結束了~
明後天也要有始有終完成發文任務!


上一篇
DAY 27 - resume builder: 將resume更新至GitHub README (中)OAuth Token and Scope
下一篇
DAY 29 - resume builder: 程式碼優化-使用者登入狀態檢查
系列文
PHP框架-Laravel自學挑戰30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言